<template>
  <li @click="pointToAlarm(caseLi)" :class="{active:caseLi.type === alarmInfo.type && caseLi.id === alarmInfo.id && caseLi.time === alarmInfo.time}" v-if="car_type.type===0||car_type.type===caseLi.carType">
    <div class="type"><span>{{caseLi.type}}<span></span></span></div>
    <p><span>车 辆 ID <span></span></span> :<span>{{caseLi.id}}</span></p>
    <p v-if="caseLi.driver"><span>司机信息<span></span></span> :<span>{{caseLi.driver}}</span><span>{{caseLi.tel}}</span></p>
    <p><span>车辆类型<span></span></span> :<span>{{caseLi.carName}}</span></p>
    <p><span>所属公司<span></span></span> :<span>{{caseLi.company}}</span></p>
    <p><span>报警时间<span></span></span> :<span>{{caseLi.time}}</span></p>
  </li>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  export default {
    name: 'CaseList',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        isPopShow: false,
      }
    },
    mounted() {

    },
    props: {
      caseLi: {
        type: Object,
      }
    },
    computed: {
      ...mapGetters(['alarmInfo','car_type']),
    },
    methods: {
      setPopShow() {
        this.isPopShow = !this.isPopShow;
      },
      pointToAlarm(data){
        this.$emit("clickEvent",data);
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../static/common/common.scss";

  li {
    margin: 0 10px 10px 15px;
    cursor: pointer;
    &:hover,&.active{
      color:#49beef;
    }

    p {
      margin: 0;
      text-align: left;
      line-height: 20px;
      font-size: $list-font;
      position: relative;
      span {
        margin-left: 10px;
        height: 20px;
        &:first-child {
          display: inline-block;
          vertical-align: middle;
          width: 64px;
          text-align: justify;
          text-justify: inter-word;
          margin-left: 5px;
          opacity: 0.9;
          font-weight: bold;
        }
        &.blue {
          color: #05d6c9;
          position: absolute;
          right: 15px;
          .tog-icon {
            display: inline-block;
            vertical-align: middle;
            width: 30px;
            height: 20px;
            background: url("../../../static/images/index/tog-down.png") no-repeat center;
            background-size: 14px 12px;
            transform: rotate(360deg);
            transition: all ease 0.3s;
            cursor: pointer;
            &.up {
              margin-top: -2px;
              transform: rotate(180deg);
              transition: all ease 0.3s;
            }
          }
        }
        span {
          display: inline-block /* Opera */
        ;
          padding-left: 100%;
        }
      }
    }
    .type {
      line-height: 25px;
      font-size: $list-font;
      color: $color-warn;
      span {
        margin-left: 5px;
        display: block;
        width: 100%;
        text-align: left;
        letter-spacing: 2px;
      }
    }
    ul {
      list-style: none;
      padding-left: 0;
      margin-top: -6px;
      li {
        margin: 10px 0;
      }
    }
  }
</style>
